<template>
  <div>
    <verified
      class="code"
      v-if="dialogTableVisible"
      @successHandle="getUserInfo()"
      @close="close()"
    ></verified>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="80px"
      class="demo-ruleForm"
    >
      <el-form-item label="手机" prop="mobile">
        <el-input v-model="ruleForm.mobile"></el-input>
      </el-form-item>
      <el-form-item class="yanzheng" label="验证码" prop="captcha">
        <el-input placeholder="请输入内容" v-model="ruleForm.captcha">
          <template slot="append">
            <el-button @click="sendMsg('ruleForm')" :disabled="showTime=='发送短信'?false:true">{{showTime}}</el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="password">
        <el-input
          type="password"
          v-model="ruleForm.password"
          auto-complete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input
          type="password"
          v-model="ruleForm.checkPass"
          auto-complete="off"
        ></el-input>
      </el-form-item> 
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确认</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>

     
  </div>
</template>
<script>
import verified from "../../components/captcha/myindex"; //滑块验证码
 
import { getMobileCode,findpwd} from '@/api/service'
export default {
  components: { verified},
  data() {
    var validatePhone = (rule, value, callback) => {
      const telStr = /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/;
      if (value === "") {
        callback(new Error("请输入正确手机号"));
      } else if (!telStr.test(value)) {
        callback(new Error("请输入正确手机号"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      activeName: "second",
      showTime:"发送短信",
      clearTime:null, 
      dialogTableVisible: false,
      ruleForm: { 
        mobile: "",
        password: "",
        captcha: "",
        checkPass: "",
      },
      rules: {
        mobile: [
          {
            required: true,
            validator: validatePhone,
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            validator: validatePass,
            trigger: "blur",
          },
          {
            min: 6,
            max: 11,
            message: "长度在 6至11 个字符",
            trigger: "blur",
          },
        ],
        checkPass: [
          {
            required: true,
            validator: validatePass2,
            trigger: "blur",
          },
        ] 
      },
    };
  },
  mounted() {
    // this.getCaptcha();
  },
  methods: {
    
    getUserInfo() {
      getMobileCode({phone:this.ruleForm.mobile,type:'recover'}).then(res=>{
        console.log(res);
        if(res.status==200){
            this.dialogTableVisible = false;
            this.daojishi(60);
        }else{
            this.$message({
              type: "error",
              message: res.msg||"获取验证码错误",
            });
        } 
      })  
    },
    daojishi(args){
      this.showTime=typeof(args)=='number'?args+'秒':args;
       clearTimeout(this.clearTime);
      this.clearTime=setTimeout(()=>{
          if(args<=0){ 
            this.daojishi("发送短信")
             clearTimeout(this.clearTime);
          }else{
            this.daojishi(--args)
          } 
      },1000);
    },
    sendMsg(formName) {
      //发送短信 
        if(this.ruleForm.mobile!=""){
          this.dialogTableVisible = true;
        }else{
             this.$message({
              type: "error",
              message: "请输入有效电话",
            });
        }  
    },
    close() {
      this.dialogTableVisible = false;
    },
    register() {
      setTimeout(() => {
        this.slidPicVisible = false; 
        findpwd(this.ruleForm).then((resp) => {
          if (resp.status == 200) {
            this.$message({
              type: "success",
              message: "已找回，请登录",
            });
            this.$refs.ruleForm.resetFields();
            this.$emit("callback"); 
          }else{
              this.$message({
              type: "error",
              message:resp.msg|| "找回密码失败",
            });
          }
        },res=>{});


      }, 500);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.register();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style scoped>
.yanzheng {
  position: relative;
}
.code {
  position: absolute;
  background: #fff;
  top: 40px;
  right: -35px;
  z-index: 99999;
}
</style>
